@page
@{ Layout = "_Layout"; }

<el-container>
  <el-aside width="100px">
    <el-tabs v-model="navType" tab-position="left" style="height: 100%;" v-on:tab-click="btnNavClick">
      <el-tab-pane label="数据列表" name="Data"></el-tab-pane>
      <el-tab-pane label="字段管理" name="Styles"></el-tab-pane>
      <el-tab-pane label="选项设置" name="Settings"></el-tab-pane>
    </el-tabs>
  </el-aside>

  <el-container>
    <el-main>

      <div style="height: 10px"></div>

      <el-form ref="form" :model="form" size="small" status-icon label-width="200px">
        <el-form-item label="表单状态">
          <el-radio v-model="form.isClosed" :label="false">启用表单</el-radio>
          <el-radio v-model="form.isClosed" :label="true">禁用表单</el-radio>
          <div class="tips">选择禁用将导致用户无法提交表单</div>
        </el-form-item>
        <el-form-item label="表单名称" prop="title" :rules="{ required: true, message: '请输入表单名称' }">
          <el-input v-model="form.title"></el-input>
        </el-form-item>
        <el-form-item label="表单简介">
          <el-input type="textarea" :rows="5" v-model="form.description"></el-input>
        </el-form-item>
        <el-form-item label="提交成功后显示提示文字">
          <el-input v-model="form.successMessage"></el-input>
          <div class="tips">在此设置表单提交成功后显示的提示文字信息</div>
        </el-form-item>
        <el-form-item label="提交成功后调用Js函数名称">
          <el-input v-model="form.successCallback"></el-input>
          <div class="tips">在此设置表单提交成功后调用Js函数的函数名称</div>
        </el-form-item>
        <el-form-item label="表单回复">
          <el-radio v-model="form.isReply" :label="true">启用表单回复功能</el-radio>
          <el-radio v-model="form.isReply" :label="false">禁用表单回复功能</el-radio>
        </el-form-item>
        <el-form-item v-if="form.isReply" label="表单列表前台显示">
          <el-radio v-model="form.isReplyListAll" :label="true">显示所有数据</el-radio>
          <el-radio v-model="form.isReplyListAll" :label="false">仅显示已回复数据</el-radio>
        </el-form-item>
        <el-form-item label="表单每页显示数目(条)" prop="pageSize" :rules="{ required: true, message: '请输入表单每页显示数目' }">
          <el-input v-model.number="form.pageSize" placeholder="请输入表单每页显示数目"></el-input>
        </el-form-item>
        <el-form-item label="提交时间限制">
          <el-radio v-model="form.isTimeout" :label="false">不限制</el-radio>
          <el-radio v-model="form.isTimeout" :label="true">限制提交时间</el-radio>
        </el-form-item>
        <el-form-item v-if="form.isTimeout" label="开始时间">
          <el-date-picker
            v-model="form.timeToStart"
            type="date"
            value-format="yyyy-MM-ddTHH:mm:ss.000Z"
            placeholder="请选择开始时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item v-if="form.isTimeout" label="结束时间">
          <el-date-picker
            v-model="form.timeToEnd"
            type="date"
            value-format="yyyy-MM-ddTHH:mm:ss.000Z"
            placeholder="请选择结束时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="图片验证码">
          <el-radio v-model="form.isCaptcha" :label="true">启用</el-radio>
          <el-radio v-model="form.isCaptcha" :label="false">不启用</el-radio>
          <div class="tips">启用图片验证码后正确输入图片中包含的字符后才能提交表单</div>
        </el-form-item>
        <el-form-item label="短信验证码">
          <el-radio :disabled="!isSmsEnabled" v-model="form.isSms" :label="true">启用</el-radio>
          <el-radio :disabled="!isSmsEnabled" v-model="form.isSms" :label="false">不启用</el-radio>
          <div class="tips">启用短信验证码后短信验证通过后才能提交表单</div>
        </el-form-item>
        <el-form-item label="向管理员发送短信通知">
          <el-radio :disabled="!isSmsEnabled" v-model="form.isAdministratorSmsNotify" :label="true">发送短信通知</el-radio>
          <el-radio :disabled="!isSmsEnabled" v-model="form.isAdministratorSmsNotify" :label="false">不发送</el-radio>
          <div class="tips">启用短信发送后将自动为每一条新增提交发送短信给指定手机</div>
        </el-form-item>
        <template v-if="form.isAdministratorSmsNotify">
          <el-form-item  label="发送通知短信模板Id" prop="administratorSmsNotifyTplId" :rules="{ required: true, message: '请输入发送通知短信模板Id' }">
            <el-input v-model="form.administratorSmsNotifyTplId"></el-input>
            <div class="tips">需进入短信供应商模板管理界面，添加通知类短信模板并获取模板Id</div>
          </el-form-item>
          <el-form-item label="短信模板包含变量">
            <el-checkbox-group v-model="administratorSmsNotifyKeys">
              <el-checkbox v-for="attributeName in attributeNames" :key="attributeName" :label="attributeName">{{getAttributeText(attributeName)}}</el-checkbox>
            </el-checkbox-group>
            <div class="tips">请勾选短信模板文字中包含的变量，请确保变量名大小写一致</div>
          </el-form-item>
          <el-form-item label="管理员接受短信通知手机号" prop="administratorSmsNotifyMobile" :rules="{ required: true, message: '请输入管理员接受短信通知手机号' }">
            <el-input v-model="form.administratorSmsNotifyMobile"></el-input>
          </el-form-item>
        </template>
        <el-form-item label="向管理员发送邮件通知">
          <el-radio :disabled="!isMailEnabled" v-model="form.isAdministratorMailNotify" :label="true">发送邮件通知</el-radio>
          <el-radio :disabled="!isMailEnabled" v-model="form.isAdministratorMailNotify" :label="false">不发送</el-radio>
          <div class="tips">启用邮件发送后将自动为每一条新增提交发送邮件给指定邮箱</div>
        </el-form-item>
        <template v-if="form.isAdministratorMailNotify">
          <el-form-item label="通知邮件标题" prop="administratorMailTitle">
            <el-input v-model="form.administratorMailTitle"></el-input>
          </el-form-item>
        </template>
        <template v-if="form.isAdministratorMailNotify">
          <el-form-item label="管理员接受邮件通知邮箱" prop="administratorMailNotifyAddress" :rules="{ required: true, message: '请输入管理员接受邮件通知邮箱' }">
            <el-input v-model="form.administratorMailNotifyAddress"></el-input>
          </el-form-item>
        </template>
        <el-form-item label="向用户发送短信通知">
          <el-radio :disabled="!isSmsEnabled" v-model="form.isUserSmsNotify" :label="true">发送短信通知</el-radio>
          <el-radio :disabled="!isSmsEnabled" v-model="form.isUserSmsNotify" :label="false">不发送</el-radio>
          <div class="tips">启用短信发送后将自动向信息提交人发送提交成功短信</div>
        </el-form-item>
        <template v-if="form.isUserSmsNotify">
          <el-form-item label="发送通知短信模板Id" prop="userSmsNotifyTplId" :rules="{ required: true, message: '请输入发送通知短信模板Id' }">
            <el-input v-model="form.userSmsNotifyTplId"></el-input>
            <div class="tips">需进入短信供应商模板管理界面，添加通知类短信模板并获取模板Id</div>
          </el-form-item>
          <el-form-item label="短信模板包含变量">
            <el-checkbox-group v-model="userSmsNotifyKeys">
              <el-checkbox v-for="attributeName in attributeNames" :key="attributeName" :label="attributeName">{{getAttributeText(attributeName)}}</el-checkbox>
            </el-checkbox-group>
            <div class="tips">请勾选短信模板文字中包含的变量，请确保变量名大小写一致</div>
          </el-form-item>
          <el-form-item label="手机号码字段">
            <el-radio-group v-model="form.userSmsNotifyMobileName">
              <el-radio v-for="attributeName in attributeNames" :key="attributeName" :label="attributeName">{{getAttributeText(attributeName)}}</el-radio>
            </el-radio-group>
            <div class="tips">请选择表单字段中设置的手机号码字段，信息提交后将向此发送短信</div>
          </el-form-item>
        </template>
      </el-form>

      <el-divider></el-divider>
      <div style="height: 10px"></div>

      <el-row>
        <el-col :span="24" align="center">
          <el-tooltip class="item" effect="dark" placement="top">
            <div slot="content" style="text-align: center">保存设置<br/>Ctrl+回车</div>
            <el-button type="primary" v-on:click="btnSubmitClick" size="small">保 存</el-button>
          </el-tooltip>
        </el-col>
      </el-row>

    </el-main>
  </el-container>
</el-container>

@section Scripts{
  <script src="/sitefiles/assets/js/admin/cms/formSettings.js" type="text/javascript"></script>
}